<template>
  <div class="home">
    <div class="banner wrap">
      <a href="#">
        <img src="../assets/img/banner.f559b49d.png" alt="" />
      </a>
    </div>
    <div class="center">
      <div class="top wrap">
        <img src="@/assets/img/jingpin.png" alt="" />
        <span href="#">精品推荐</span>
      </div>
      <div class="cen wrap">
        <!-- <ul class="kuang">
          <li v-for="item in records" :key="item.id">
            <img :src="`http://sc.wolfcode.cn${item.coverImg}`" alt="" />
            <div class="aligning">
              <p>{{ item.name }}</p>
              <p class="yanse">{{ item.coin }}积分</p>
              <button>立即兑换</button>
            </div>
          </li>
        </ul> -->
        <comp1 :recommods="records" />
      </div>
    </div>
    <div class="center m">
      <div class="top wrap">
        <img src="@/assets/img/jingpin.png" alt="" />
        <span href="#">精品推荐</span>
      </div>
      <div class="cen wrap">
        <comp1 :recommods="records1" />
      </div>
    </div>
  </div>
</template>
<script>
import { gethomeapi, gethotapi } from "@/request/api.js";
import comp1 from "@/views/components/comp1.vue";
export default {
  data() {
    return {
      records: {},
      records1: {},
    };
  },
  async created() {
    let res = await gethomeapi();
    this.records = res.data.data.records;
    // console.log(this.records);

    gethotapi().then((res) => {
      console.log(res);
      this.records1 = res.data.data.records;
    });
  },
  components: {
    comp1,
  },
};
</script>
<style lang="less" scoped>
.home {
  .banner {
  }
  .center {
    margin-top: 30px;
    background: #f5f5f5;
    padding-bottom: 22px;
    .top {
      display: flex;
      align-items: center;
      img {
        width: 36px;
        height: 40px;
      }
      padding-top: 50px;
      height: 60px;
      span {
        line-height: 60px;
        // height: 29px;
        font-size: 30px;
        color: #242b39;
      }
    }
    .cen {
      margin-top: 22px;
      //   background: blue;
      // height: 412px;
      // .kuang {
      //   display: flex;
      //   justify-content: space-between;
      //   li {
      //     height: 412px;
      //     background: white;
      //     img {
      //       width: 285px;
      //       height: 250px;
      //     }
      //     .aligning {
      //       text-align: center;
      //       flex-grow: 0;
      //       flex-direction: column;
      //       p {
      //         margin: 20px;
      //       }
      //       .yanse {
      //         color: #fd604d;
      //         font-size: 18px;
      //       }
      //       button {
      //         width: 100px;
      //         height: 36px;
      //         border: blue 1px solid;
      //         color: blue;
      //       }
      //     }
      //   }
      // }
    }
  }
  .m {
    margin-top: 0px;
  }
}
</style>